<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resources/css/jquery-ui-1.8.21.custom.css">
<link rel="stylesheet" href="resources/css/cbnuprogress.css">
<script src="resources/js/jquery-1.7.2.min.js"></script>
<script src="resources/js/jquery-ui-1.8.21.custom.min.js"></script>

</head>
<body>
<div class="form-container ui-helper-clearfix ui-corner-all">
			<h1>질문&답변</h1>
			<div id="cbnuProgressbar"><p>진행상황</p></div>
            <label id="percent">0%</label>
			<form >
                <div class="page">
                    <h2>정보를 입력해주세요</h2>
                    <fieldset class="ui-corner-all">
                        <label>이름 : </label><input type="text">
                        <label>아이디 :</label><input type="text">
                        <label>연락처 : </label><input type="text">
                        <label>메일 : </label><input type="text">
                    </fieldset>
                </div>
                <div class="page ui-helper-hidden">
                    <h2>질문을 남겨주세요</h2>
                    <fieldset class="ui-corner-all">
                        <label>질문 & 답변 : </label><textarea rows="8" cols="30"></textarea>
                    </fieldset>
                </div>
                <div class="page ui-helper-hidden">
                    <h2>완료!</h2>
                    <fieldset class="ui-corner-all">
                        <p>질문하신 내용이 업로드 되었습니다. 감사합니다.</p>
                    </fieldset>
                </div>
            </form>
            <button id="next">다음</button><button id="back" disabled="disabled">이전</button>
		</div>

		<script type="text/javascript">
			$(function(){

				var pro = $("#cbnuProgressbar"),					
					option = {
						change: function() {				
							pro.next().text(pro.progressbar("value") + "%");  
						}		
					};
				$("#cbnuProgressbar").progressbar(option);

				$("#next, #back").click(function() {				
					$("button").attr("disabled", true);

					if (this.id === "next") {					
						pro.progressbar("value", pro.progressbar("value") + 50);
						$("form").find("div:visible").fadeOut().next().fadeIn(function(){  
							$("#back").attr("disabled", false);			
							if (!$("form").find("div:last").is(":visible")) {			
								$("#next").attr("disabled", false);
							}
						});	
					} else{		
						pro.progressbar("value", pro.progressbar("value") - 50);		
						$("form").find("div:visible").fadeOut().prev().fadeIn(function() {  
							$("#next").attr("disabled", false);											
							if (!$("form").find("div:first").is(":visible")) {			
								$("#back").attr("disabled", false);	
							}
						});

					}

				});













			});		
		</script>
</body>
</html>